<template>
  <view class="user-avatar" :class="[`size-${size}`, shape]" :style="customStyle">
    <image 
      v-if="src" 
      :src="src" 
      mode="aspectFill" 
      class="avatar-image"
      @error="handleError"
    ></image>
    <view v-else class="avatar-text" :style="{ backgroundColor: bgColor }">
      {{ displayText }}
    </view>
    <view v-if="showBadge" class="badge" :class="badgeType"></view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'medium', // small, medium, large
    validator: (val) => ['small', 'medium', 'large', 'custom'].includes(val)
  },
  customSize: {
    type: [String, Number],
    default: ''
  },
  shape: {
    type: String,
    default: 'circle', // circle, square
    validator: (val) => ['circle', 'square'].includes(val)
  },
  bgColor: {
    type: String,
    default: ''
  },
  showBadge: {
    type: Boolean,
    default: false
  },
  badgeType: {
    type: String,
    default: 'online', // online, offline, busy
    validator: (val) => ['online', 'offline', 'busy'].includes(val)
  }
});

// 处理图片加载错误
const imageError = ref(false);
const handleError = () => {
  imageError.value = true;
};

// 计算显示的文本
const displayText = computed(() => {
  if (!props.name) return '';
  
  // 如果是中文名，取前两个字
  if (/[\u4e00-\u9fa5]/.test(props.name)) {
    return props.name.substring(0, 2);
  }
  
  // 如果是英文名，取首字母或前两个字母的首字母
  const nameParts = props.name.split(' ');
  if (nameParts.length > 1) {
    // 有空格，可能是 First Last 格式
    return (nameParts[0][0] + nameParts[1][0]).toUpperCase();
  }
  
  // 单个单词，取前两个字母
  return props.name.substring(0, 2).toUpperCase();
});

// 计算随机背景色（如果没有提供）
const randomColor = computed(() => {
  if (props.bgColor) return props.bgColor;
  
  // 基于名称生成一致的颜色
  const colors = [
    '#1890ff', '#52c41a', '#faad14', '#f5222d', 
    '#722ed1', '#eb2f96', '#fadb14', '#a0d911',
    '#13c2c2', '#fa8c16', '#fa541c', '#2f54eb'
  ];
  
  if (!props.name) return colors[0];
  
  // 使用名称的字符码总和作为索引，确保同一个名字总是有相同的颜色
  const charSum = props.name.split('').reduce((sum, char) => sum + char.charCodeAt(0), 0);
  return colors[charSum % colors.length];
});

// 自定义尺寸样式
const customStyle = computed(() => {
  if (props.size !== 'custom' || !props.customSize) return {};
  
  const size = isNaN(props.customSize) ? props.customSize : `${props.customSize}rpx`;
  return {
    width: size,
    height: size,
    fontSize: `calc(${size} * 0.4)`
  };
});
</script>

<style lang="scss" scoped>
.user-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-weight: 500;
  
  &.circle {
    border-radius: 50%;
  }
  
  &.square {
    border-radius: var(--border-radius-base);
  }
  
  &.size-small {
    width: 60rpx;
    height: 60rpx;
    font-size: 24rpx;
  }
  
  &.size-medium {
    width: 80rpx;
    height: 80rpx;
    font-size: 32rpx;
  }
  
  &.size-large {
    width: 120rpx;
    height: 120rpx;
    font-size: 48rpx;
  }
  
  .avatar-image, .avatar-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    
    &.online {
      background-color: var(--success-color);
    }
    
    &.offline {
      background-color: var(--text-quaternary);
    }
    
    &.busy {
      background-color: var(--error-color);
    }
  }
  
  // 为大尺寸调整徽章大小
  &.size-large .badge {
    width: 24rpx;
    height: 24rpx;
  }
}
</style> 